<template>
  <div>
    <h2>{{ name }}</h2>

    <h2>{{ age }}</h2>

    <button @click="change">过了一年</button>
  </div>
</template>
<script setup>
import { reactive, toRefs } from 'vue'

const user = reactive({
  name: 'harry',
  age: 29
})

//解构响应式对象，会使数据失去响应式
const { name, age } = toRefs(user)

const change = () => {
  age.value++
}
</script>
<style lang="less"></style>
